<template>
    <view :class="classed" @click="onEventEmits">
        <slot />
    </view>
</template>

<script setup lang="ts">
import { useNamespace } from "@/hooks";

const ns = useNamespace("button");

/**
 * 定义组件的事件发射器
 * @emits click - 当组件被点击时触发
 */
const emits = defineEmits(["click"]);

/**
 * 定义组件的属性
 * @property {boolean} plain - 是否为朴素按钮样式，默认为false
 * @property {string} size - 按钮尺寸，可选值为"default"|"small"|"mini"，默认为"default"
 * @property {string} type - 按钮类型，可选值为"default"|"primary"|"danger"，默认为"default"
 */
const props = defineProps({
    plain: {
        type: Boolean,
        default: false
    },
    size: {
        type: String,
        default: "default",
        validator(value: string) {
            return ["large", "small", "mini", "default"].includes(value);
        }
    },
    type: {
        type: String,
        default: "default",
        validator(value: string) {
            return ["default", "primary", "danger", "text"].includes(value);
        }
    },
    disabled: {
        type: Boolean,
        default: false
    },
    round: {
        type: Boolean,
        default: false
    }
});

/**
 * 计算组件的CSS类名
 * @returns {Object} 包含各种CSS类名的对象，用于动态绑定到组件根元素
 */
const classed = computed(() => [
    ns.b(),
    ns.is("plain", props.plain),
    ns.is("round", props.round),
    ns.m(props.type),
    ns.m(props.size),
    ns.is("disabled", props.disabled)
]);

const onEventEmits = (val: any) => {
    if (props.disabled) return;
    emits("click", val);
};
</script>

<style scoped lang="scss">
@import "./index";
</style>
